<template>
	<view>
		<!-- 搜索框 -->
		<view class="search-box">
		  <!-- 使用 uni-ui 提供的搜索组件 -->
		  <uni-search-bar :radius="100" cancelButton="none" :focus="true" @input="input"></uni-search-bar>
		</view>
		
		<!-- 搜索历史 -->
		<view class="history-container" v-if="searchResults.length === 0">
			<view class="history-cls">
				<text>搜索历史</text>
				<uni-icons type="trash" size="20"  @click="clearKeys"></uni-icons>
			</view>
			<view class="history-key">
				<uni-tag 
				:text="obj" 
				type="default" 
				v-for="(obj,i) in searchKeys" 
				:key="i"
				circle="true"
				@click="gotoGoodsList(obj)"
				>
				</uni-tag>
			</view>
		</view>
		
		<!-- 搜索结果 -->
		<view class="search-res-list" v-else>
			<view class="res-item" v-for="(item,i) in searchResults" :key="i">
				<text>{{item.goods_name}}</text>
				
				<uni-icons type="arrow-right"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timer:null,
				kw:'',
				searchResults:[],
				searchKeys:['美妆','帽子']
			};
		},
			
		onLoad(){
			//读取搜索关键字
			
			this.searchKeys = JSON.parse(uni.getStorageSync('kw') || '[]')
		}
		
		
		,
		methods:{
			input(value){
				//防抖优化 间隔一段时间之后执行搜索
				clearTimeout(this.timer)
					
				this.timer = setTimeout(()=>{
					//非空判断
					//搜索关键词不为空时才会发起搜索 否则清空搜索结果
					if(value.trim()!== ''){
						this.kw= value
						//搜索关键词列表
						this.getSearchResults()
					}else{
						//清空搜索列表
						this.searchResults=[]
						//保存搜索关键词
						this.saveSearchKeys()
					}
				},2000)
			},
				
			async getSearchResults(){
				const {data:res} = await uni.$http.get('/goods/qsearch',{query:this.kw})
				if(res.meta.status !==200) return uni.$showMsg()
				//设置页面数据
				this.searchResults = res.message
			},
				
			saveSearchKeys(){
				//判断是否已存在该关键字
				const checkKeys = (arr,val)=>{
					return arr.some(arrval=> val === arrval)
				}
				const resault = checkKeys(this.searchKeys,this.kw)
				
				//找到了
				if(resault) {
					const index = this.searchKeys.indexOf(this.kw)
					//根据索引删除 再重新加到开头
					this.searchKeys.splice(index,1)
					this.searchKeys.unshift(this.kw)
					
				} else{
					//没找到
					this.searchKeys.unshift(this.kw)
				}
					
				//搜索关键字持久化
				uni.setStorageSync('kw',JSON.stringify(this.searchKeys))
			},
			
				
			//清空历史记录	
			clearKeys(){
				//清空data中的记录
				this.searchKeys = []
				//清空本地存储
				uni.setStorageSync('kw','[]')
			},
			
			//搜索历史跳转商品列表
			gotoGoodsList(item){
				uni.navigateTo({
					url:`/subPkg/goods_list/goods_list?query=${item}`
				})
			}
		}
	}
</script>

<style lang="scss">
	
.search-box{
	background-color: #c00000;
	position: sticky;
	top: 0;
	left: 0;
	z-index: 999;
}
		
.history-container{
		
	.history-cls{
		display: flex;
		height: 60rpx;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
		padding: 0 15rpx;
		margin: 8rpx;
		border-bottom: 2px solid #efefef;
	}
		
	.history-key{
		padding: 16rpx;
			
		uni-tag{
			margin: 0 10rpx;
		}
	}
}
	
	
.search-res-list{
		
	.res-item{
		height: 75rpx;	
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2px solid #efefef;
		padding: 0 15rpx;
		text{
			//隐藏多余文字
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			
			
			font-size: 22rpx;
		}
	}
}
</style>
